<template>
  <div class="bgc">
    <div class="title">
      <img src="@/assets/water_page_head1.png" alt="">
    </div>

    <div class="left"></div>

    <div class="right">

    </div>

    <div class="bottom">
      <div class="button_box">
        <router-link to="home">
          <div class="button" :class="{ active: route.name == 'Home' }">
            <!-- <img :class="{ active: route.name == 'Home' }" src="@/assets/总览@2x.png" alt=""> -->
            <span class="text">降水监测</span>
          </div>
        </router-link>

        <router-link to="rains" @click="handleOpenPage">
          <div class="button" :class="{ active: route.name == 'Rains' }">
            <span class="text">雨型仿真</span>
            <!-- <img :class="{ active: route.name == 'Rains' }" src="@/assets/智慧巡检@2x.png" alt=""> -->
          </div>
        </router-link>
        <router-link to="warning">
          <div class="button" :class="{ active: route.name == 'Warning' }">
            <span class="text">风险预案</span>
            <!-- <img :class="{ active: route.name == 'Warning' }" src="@/assets/智慧作业@2x.png" alt=""> -->
          </div>
        </router-link>

        <router-link to="history">
          <div class="button" :class="{ active: route.name == 'History' }">
            <span class="text">历史警情</span>
          </div>
        </router-link>
        <router-link to="sewageplant">
          <div class="button" :class="{ active: route.name == 'Sewageplant' }">
            <span class="text">水厂运维</span>
            <!-- <img :class="{ active: route.name == 'Sewageplant' }" src="@/assets/智慧监测@2x.png" alt=""> -->
          </div>
        </router-link>
      </div>
    </div>
  </div>

  <rains-page v-if="showMainPage" @closePage="handleClosePage"></rains-page>
</template>

<script setup lang="ts">
import RainsPage from './rains-page.vue';
import { reactive, ref } from 'vue'
import { weatherAPI } from '@/apis/tianqi'
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.name);


let showMainPage = ref(true)

function handleClosePage() {
  showMainPage.value = false
}

function handleOpenPage() {
  showMainPage.value = true
}

</script>


<style scoped>
.bgc {
  width: 100vw;
  height: 100vh;
  background-image: url('~@/assets/背景.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.title {
  height: 7.5vh;
  width: 100vw;
}

img {
  width: 100%;
  height: 100%;
}

.bottom {
  height: 8vh;
  width: 48vw;
  position: fixed;
  bottom: 0;
  left: 26vw;
  background-image: url('~@/assets/底部菜单背景.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
}

.button_box {
  width: 36vw;
  margin-left: 6vw;
  padding-top: 2vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.button {
  width: 5.5vw;
  height: 3.8vh;
  line-height: 3.8vh;
  text-align: center;
  cursor: pointer;
  background-image: url('~@/assets/按钮-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  opacity: 0.6;
}

.button:hover,
.button.active {
  opacity: 1;
}

.button .text {
  color: #fff;
  font-size: 1vw;
}

.button img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.button img.active {
  opacity: 1;
}

.button img:hover {
  opacity: 1;
}

.left {
  float: left;
  height: calc(100vh - 15vh);
  /* background-color: pink; */
  margin-left: 10px;
}

.right {
  float: right;
  height: calc(100vh - 15vh);
  margin-right: 10px;
}

.tq {
  width: 18vw;
  height: 25vh;
  background-image: url('~@/assets/天气框.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding: 0 1.5vw 0.5vh 1.5vw;
}

.tq_title {
  height: 4vh;
  line-height: 4vh;
  color: #fff;
  /* background-color: #fff; */
  margin-bottom: 1vh;
  border-bottom: 0.5px #5effff solid;
  font-size: 1vh;
}

.tq_title .name {
  display: inline-block;
  padding-right: 2vh;
  height: 100%;
  border-bottom: 1px solid #00fdff;
  letter-spacing: 2px;
}

.content {
  width: 100%;
  height: 12vh;
  margin: 1vh 0;
}

.describe {
  width: 100%;
  height: 6vh;
  background-image: url('~@/assets/天气框.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 1vw;
}

.describe_txt {
  /* display: flex; */
  font-size: 1.4vh;
  color: #fff;
}

.describe_txt1,
.describe_txt2 {
  height: 2vh;
  margin-top: 0.5vh;
}

.txt2 {
  margin-left: 1vw;
  color: #59d8fc;
  /* background-color: chartreuse; */
}

.content {
  display: flex;
  justify-content: space-around;
  text-align: center;
  color: #fff;
}

.day {
  font-size: 1.6vh;
}

.weather,
.temperature {
  font-size: 1.2vh;
  margin-top: 0.5vh;
}

.dayimg {
  width: 2vw;
  height: 3.6vh;
  margin: 0.5vh auto;
}

.dayimg img {
  width: 100%;
  height: 100%;
}
</style>